import React from 'react';
import { Drawer } from 'antd';
import LeftOutlined from '@ant-design/icons/lib/icons/LeftOutlined';
import RightOutlined from '@ant-design/icons/lib/icons/RightOutlined';
import classNames from 'classnames';
import css from './index.scss';

const DrawerIcon = ({ visible, onClose, children, className, forceRender = true, ...other }) => {
	return (
		<Drawer
			closeIcon={
				<div className={css.drawer_close}>
					{visible ? <RightOutlined title="收起" /> : <LeftOutlined title="展开" />}
				</div>
			}
			placement="right"
			width={720}
			headerStyle={{ padding: '13px 24px' }}
			onClose={onClose}
			visible={visible}
			mask={false}
			forceRender={forceRender}
			{...other}
			className={classNames(css.drawer, [className])}
		>
			{children}
		</Drawer>
	);
};
export default DrawerIcon;
